<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>制作一个简单的菜单动画效果</title>
    <link rel="stylesheet" href="../css/css3.css">
    <!--[if IE 8]>
        <style type="text/css">
            .size{
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/bg.jpg', sizingMethod='scale')";
            }  
        </style>
    <![endif]-->
</head>

<body>
    <h2>任务一：切换样式</h2>
    <div class="task box">
        <h3 class="tasktext">前端样式</h3>
        <button class="btn">切换样式</button>
    </div>
    <h2>任务二：初步接触 CSS 2D 变形</h2>
    <div class="task2 box">
        <div class="box0">box0</div>
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
        <div class="box5">box5</div>
    </div>
    <h2>border-radius</h2>
    <div class="radius box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <p><a
                href="https://www.zhangxinxu.com/wordpress/2010/04/%E8%AE%A9ie6ie7ie8%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81css3%E5%B1%9E%E6%80%A7/">让IE6/IE7/IE8浏览器支持CSS3属性</a>
        </p>
        <p>试试 <a href="../js/ie-css3.htc">ie-css3.htc</a></p>
        <p>.box { border-radius: 15px; box-shadow: 10px 10px 20px #000; <span>behavior: url(ie-css3.htc);</span> }</p>
    </div>
    <h2>box-shadow</h2>
    <div class="shadow box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <p>兼容 ie6/7/8</p>
        <p>方法一：
            <span>filter:progid:dXImageTransform.Microsoft.DropShadow(color=#888888,offX=10,offY=10,positives=true);</span></span>
        </p>
        <p>方法二： <span>filter:progid:DXImageTransform.Microsoft.Shadow(color='#0099ff', Direction='120',
                Strength='10');</span></p>
        <p>方法三： <a href="../js/ie-css3.htc">ie-css3.htc</a></p>
    </div>
    <h2>border-image</h2>
    <div class="image box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <p>注意： Internet Explorer 10 及更早的版本不支持 border-image 属性</p>
    </div>
    <h2>background-size</h2>
    <div class="size box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <p>兼容ie8 <span>-ms-filter:
                "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file',
                sizingMethod='scale')"</span></p>
        <p>效果和 cover 差不多，但是 cover 在 ie 中与边框间会有白边，兼容写法不会有白边</p>
    </div>
    <h2>background-origin</h2>
    <div class="origin box">
        <div class="box1">Lorem ipsum dolor, sit amet consectetur</div>
        <div class="box2">Lorem ipsum dolor, sit amet consectetur</div>
        <div class="box3">Lorem ipsum dolor, sit amet consectetur</div>
        <p>ie8 下是padding-box</p>
        <p>background-attachment: fixed; 下 background-origin: 无用</p>
    </div>
    <h2>background-clip</h2>
    <div class="clip box">
        <div class="box1">Lorem ipsum dolor, sit </div>
        <div class="box2">Lorem ipsum dolor, sit </div>
        <div class="box3">Lorem ipsum dolor, sit </div>
        <p>指定绘图区的背景, ie8 下是padding-box</p>
    </div>
    <h2>text-shadow</h2>
    <div class="text box">
        注意: IE 9 及更早版本的浏览器不支持 text-shadow 属性.
    </div>
    <h2>transform</h2>
    <div class="transform box">
        <div class="box1">
            <div></div>
        </div>
        <div class="box2">
            <div></div>
        </div>
        <div class="box3">
            <div></div>
        </div>
        <div class="box4">
            <div></div>
        </div>
        <div class="box5">
            <div></div>
        </div>
        <div class="box6">
            <div></div>
        </div>
        <div class="box7">
            <div></div>
        </div>
        <p>
            transform 兼容方法： -webkit-transform ， -moz-transform ， -ms-transform ， -o-transform ， transform
        </p>
        <p>
            transition 兼容方法： -webkit-transition ， -moz-transition， -o-transition ， transition ，<span>ie9 及以下不支持</span>
            <span>transition: all .5s ease-in-out 1s;</span>
        </p>
    </div>
    <h2>animation</h2>
    <div class="animation box">
        <div class="box1"></div>
        <p>兼容： <span>-webkit- 、 -moz- 、 IE9及以下不支持</span></p>
    </div>
    <h2>linear-gradient radial-gradient</h2>
    <div class="gradient box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <p>兼容： <span>-webkit- 、 -moz- 、 IE9及以下不支持</span></p>
        <p>兼容写法： <span>filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ec8c69',
                endColorstr='#f9d423');</span></p>
        <table>
            <caption>rgba 在 IE 下的转换</caption>
            <thead>
                <tr>
                    <th>rgba 数值</th>
                    <th>filter 值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>0.1</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>0.2</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td>0.3</td>
                    <td>4c</td>
                </tr>
                <tr>
                    <td>0.4</td>
                    <td>66</td>
                </tr>
                <tr>
                    <td>0.5 ， <span>background: rgba(0,0,0,.5);</span></td>
                    <td>7f ，
                        <span>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);</span>
                    </td>
                </tr>
                <tr>
                    <td>0.6</td>
                    <td>99</td>
                </tr>
                <tr>
                    <td>0.7</td>
                    <td>b2</td>
                </tr>
                <tr>
                    <td>0.8</td>
                    <td>c8</td>
                </tr>
                <tr>
                    <td>0.9</td>
                    <td>e5</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>&nbsp;</td>
                    <td>在此特别感谢 <a href="https://www.cnblogs.com/jesse131/p/4771611.html">Jesse131</a> 的文章</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <script>
    var btn = document.querySelector(".btn");
    var text = document.querySelector(".tasktext");
    btn.onclick = function () {
        if (text.className.indexOf("active") !== -1) {
            text.className = "tasktext";
        }else {
            text.className = "tasktext active";
        }
    }
    </script>
</body>

</html>